<template>
    <div>
        <a-form :model="form" ref="formRef" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
            autocomplete="off">
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="项目名称" name="proName" :rules="[{ required: true }]">
                        <a-input-search v-model:value="form.proName" :disabled="disabled" style="width: 100%"
                            placeholder="请选择项目" @click="onSearch" @search="onSearch" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="项目编号" name="proCode">
                        <a-input v-model:value="form.proCode" disabled style="width: 100%" placeholder="请选择项目" />

                    </a-form-item>
                </a-col>
            </a-row>
            <a-button type="primary" @click="addRow()" class="mb-2" v-if="!disabled"  >
                <template #icon>
                    <plus-outlined />
                </template>
                <span>新增一行</span>
            </a-button>
 
            <a-table ref="tableRef" :data-source="form.info" bordered :row-key="(record) => record.id"
                :columns="columns" :scroll="{ x: 1100, }">
                <template #bodyCell="{ column, record, index }">
                    <template v-if="column.key === 'index'">
                        {{ index + 1 }}
                    </template>
                    <template v-else-if="column.key === 'action'">
                        <div  v-if="!disabled" >
                            <a-popconfirm title="确定删除此数据源？" @confirm="remove(index)">
                                <a-button type="link" danger size="small">删除</a-button>
                            </a-popconfirm>
                        </div>
                    </template>
                    <template v-else>
                        <a-input v-model:value="form.info[index][column.key]"  />
                    </template>
                </template>
            </a-table>

            <system :value="form"></system>
        </a-form>
        <projectSelection ref="proSelect" @onClose="prSelectOk" :value="form.proSelectRecords" />
        <userSelectorPlus ref="userSelectorRef" @OnClose="userSelectorOk"></userSelectorPlus>
    </div>
</template>

<script setup>
import system from '@/components/Task/system.vue'
import projectSelection from '@/components/pm/projectSelection.vue'
import userSelectorPlus from '@/components/Selector/userSelectorPlusExtend.vue'

const form = ref({
});
const userSelectorRef = ref()
const showUserSelect = () => {
    userSelectorRef.value.show("")
}
const userSelectorOk = (data) => {
    form.value.directorName = data.value.directorName
    form.value.director = data.value.directorId
}
const remove=(index)=>{
    form.value.info.splice(index,1)
}

const proSelect = ref()
const onSearch = () => {
    proSelect.value.show()
}
const prSelectOk = (selectedRowKeys, selectRecords) => {
    // console.log("项目选择ok ", selectedRowKeys, selectRecords)
    form.value.proId = selectRecords[0].id;
    form.value.proCode = selectRecords[0].code;
    form.value.proName = selectRecords[0].name;
    form.value.proSelectRecords = selectRecords;
}

const formRef = ref(null)
const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 70,
    },
    {
        title: '工程内容',
        dataIndex: 'content',
        key: 'content',
        width: 150,
        align: 'center'

    },
    {
        title: '规格及参数',
        dataIndex: 'spec',
        key: 'spec',
        width: 150,
        align: 'center'

    },
    {
        title: '单位',
        dataIndex: 'unit',
        key: 'unit',
        width: 90,
        align: 'center'

    },

    {
        title: '数量',
        dataIndex: 'number',
        key: 'number',
        width: 90,
        align: 'center'
    },
    {
        title: '审核数量（项目部）',
        dataIndex: 'proApproveNumber',
        key: 'proApproveNumber',
        width: 200,
        align: 'center'
    },
    {
        title: '审核数量（公司）',
        dataIndex: 'comApproveNumber',
        key: 'comApproveNumber',
        width: 200,
        align: 'center'
    },
    {
        title: '备注',
        dataIndex: 'remark',
        key: 'remark',
        width: 200,
        align: 'center'
    },

    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        width: 120,
        align: 'center',
        fixed:'right'
    },

]
const addRow = () => {
    if (!form.value.info) {
        form.value.info = []
    }
    form.value.info.push({

    })
}

const props = defineProps({
    value: {
        type: Object,
        default: () => { }
    },
    disabled: {
        type: Boolean,
        default: () => false
    },
})
watch(
    () => props.value,
    (newVal, oldVal) => {
        if (newVal) {
            form.value = { ...newVal }
            if (form.value.name) {
                columns.splice(columns.length - 1, 1)
            }
        }
    },
    { deep: true, immediate: true }
)

const getData = () => {
    return new Promise((resolve, reject) => {
        formRef.value.validate().then(() => {
            form.value.flowCode="FLW_MEASURE_INNER"
            console.log(form.value)
            resolve(form.value)
        }).catch((err) => {
            reject(err)
        });
    })
}
// 重置
const resetForm = () => {
    form.value = {}
}
defineExpose({
    getData,
    resetForm,

})

</script>